
/**
 *  为<button id="add" class="btn">添加</button>添加点击事件
 * 用于添加一个文章记录
 * @returns 
 */
function add() {
    var url = document.getElementById("url");
    var name = document.getElementById("name");
    if (url.value == "" || name.value == "") {
        alert("地址或标题为空！")
        return;
    }
    var article = JSON.stringify({
        "url": url.value,
        "name": name.value
    });
    //清空输入框
    clearInput();
    var articles;
    if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
        articles = new Array();
    } else {
        articles = JSON.parse(localStorage.getItem("articles"));
    }
    //加入到队头
    articles.unshift(article);
    localStorage.setItem("articles", JSON.stringify(articles));
    //刷新页面
    showContent();
}
/**
 * 用来显示添加过的文章记录
 * 和给地址栏获取当前地址
 * 也可以手动输入
 * @returns 
 */
function showHistory() {
    var url = document.getElementById("url");
    getCurrentUrl();
    var articles;
    if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
        return;
    } else {
        articles = JSON.parse(localStorage.getItem("articles"));
    }
    showContent();
}
/**
 * 清空所有记录
 * @returns 
 */
function deleteAllUrl() {
    if (confirm("确认清空吗？")) {
        if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
            return;
        } else {
            localStorage.clear();
        }
        var historyContent = document.getElementById("historyContent");
        historyContent.innerHTML = "";
    }
}
/**
 * 清空输入框
 */
function clearInput() {
    var url = document.getElementById("url");
    var name = document.getElementById("name");
    url.value = "";
    name.value = "";
}

/**
 * 获取当前地址栏地址
 */
function getCurrentUrl() {
    chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
        var url = document.getElementById("url");
        url.value = tabs[0].url;
    });
}
/**
 * 刷新页面作用
 * 采用字符串拼接
 * @returns 
 */
function showContent() {
    var articles;
    if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
        return;
    } else {
        articles = JSON.parse(localStorage.getItem("articles"));
    }
    var historyContent = document.getElementById("historyContent");
    var s = "";
    for (var i = 0; i < articles.length; i++) {
        var json = JSON.parse(articles[i]);
        var url = json.url;
        var name = json.name;
        s = s + "<div class=\"contentUrl\">\n" +
            "                <a href=\"" + url + "\" target=\"_blank\"><h3>" + name + "</h3></a>\n" +
            "      <button class=\"btn\" id=\"" + name + "\" id=\"" + i + "\">删除</button>      </div>";
    }
    historyContent.innerHTML = s;
    //为每个删除按钮添加点击事件
    var btns = document.getElementsByTagName("button");
    for (var i = 0; i < btns.length; i++) {
        if (btns[i].id != "add" && btns[i].id != "deleteAll") {
            btns[i].addEventListener("click", function () {
                if (confirm("确认删除\"" + this.id + "\"吗？")) {
                    deleteByName(this.id);
                }
            });
        }
    }
}
/**
 * button的id也是文章的name，通过name确认是那篇文章
 * @param {button的id}} Name 
 * @returns 
 */
function deleteByName(Name) {
    var articles;
    if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
        return;
    } else {
        articles = JSON.parse(localStorage.getItem("articles"));
    }
    var newArticles = articles.filter(e => {
        var a = JSON.parse(e);
        if (a.name == Name) {
            return false;
        }
        return true;
    });
    localStorage.setItem("articles", JSON.stringify(newArticles));
    showContent();
}
//页面加载显示
window.onload = showHistory;
//清空按钮添加点击事件
var deletebtn = document.getElementById("deleteAll");
deletebtn.onclick = deleteAllUrl;
//添加按钮添加点击事件
var addbtn = document.getElementById("add");
addbtn.onclick = add;
